<template>
  <el-row justify="start" type="flex">
    <el-col :span="4" :class="[isCollapse ? 'w-4' : 'w-5']">
      <menu-item></menu-item>
    </el-col>
    <el-col :span="24">
      <el-container>
        <el-header>
          <my-header></my-header>
        </el-header>
        <el-main>
          <breadcrumb></breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-col>
  </el-row>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import MenuItem from "@/views/menu/menu-item.vue";
import MyHeader from "@/components/MyHeader.vue";
import Breadcrumb from "@/components/breadcrumb.vue";
import { State } from "vuex-class";
@Component({
  components: { Breadcrumb, MyHeader, MenuItem }
})
export default class Main extends Vue {
  @State("isCollapse") handleCollapse: any;
  created() {
    this.handleCollapse;
  }
  /*
   * 注意state不能直接使用需要使用计算属性
   * */
  get isCollapse() {
    return this.handleCollapse;
  }
  protected name!: "Main";
}
</script>

<style lang="scss" scoped>
/deep/ .el-header {
  padding: 0;
  box-sizing: border-box;
  box-shadow: 0px -4px 7px 2px #c6c6c6;
}
.w-4 {
  width: 4% !important;
}
.w-5 {
  width: 17% !important;
}
</style>
